import { memo, useContext, useEffect } from "react";
import type { FormProps } from "antd";
import { Button, Form, Row, Col, Input, Card, DatePicker, Select } from "antd";
import styles from "./index.module.scss";
import dayjs from "dayjs";
import { brandLogo, photoScale } from "../../config/option";
import indexContext from "../../context";
import { IPhotoData } from "../../type";

type FieldType = {};

function PhotoForm() {
  const { showPhotoIndex, globalConfig, reRenderCanvas, showPhoto } =
    useContext(indexContext);

  const [form] = Form.useForm();

  const onFinish: FormProps<FieldType>["onFinish"] = (values) => {
    console.log("Success:", values);
    if (!showPhoto) return;
    const newPhotoData: IPhotoData = {
      ...showPhoto,
      photoInfo: {
        ...showPhoto.photoInfo,
        ...values,
      },
    };
    reRenderCanvas(newPhotoData);
  };

  useEffect(() => {
    if (!showPhoto) return;
    const { photoInfo } = showPhoto;
    const initData = {
      ...photoInfo,
      date: dayjs(photoInfo.date),
    };
    form.setFieldsValue(initData);
  }, [form, showPhoto, showPhotoIndex]);

  return (
    <div className={styles.content}>
      <Form onFinish={onFinish} variant="filled" form={form}>
        <Card title="相纸设置" size="small" className={styles.formCard}>
          <Row gutter={16}>
            <Col span={12}>
              <Form.Item<FieldType> label="比例" name="scale">
                <Select options={photoScale} />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item<FieldType> label="边框" name="padding">
                <Input />
              </Form.Item>
            </Col>
          </Row>
        </Card>
        <Card title="水印设置" size="small" className={styles.formCard}>
          <Row gutter={16}>
            <Col span={12}>
              <Form.Item<FieldType> label="品牌" name="logo">
                <Select options={brandLogo} />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item<FieldType> label="机型" name="model">
                <Input />
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={16}>
            <Col span={12}>
              <Form.Item<FieldType> label="焦段" name="focus">
                <Input />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item<FieldType> label="快门" name="shutter">
                <Input />
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={16}>
            <Col span={12}>
              <Form.Item<FieldType> label="光圈" name="f">
                <Input />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item<FieldType> label="ISO" name="iso">
                <Input />
              </Form.Item>
            </Col>
          </Row>
          <Form.Item<FieldType> label="地址" name="address">
            <Input />
          </Form.Item>
          <Form.Item<FieldType> label="时间" name="date">
            <DatePicker showTime format={globalConfig.dateFormat} />
          </Form.Item>
        </Card>
        <Form.Item>
          <Button type="primary" htmlType="submit">
            重新绘制
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
}

export default memo(PhotoForm);
